<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>会员详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/app/admin/component/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" media="all">
</head>
<body>
    <div class="layui-fluid">
        <!-- 会员基本信息 -->
        <div class="layui-card">
            <div class="layui-card-header">基本信息</div>
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-md6">
                        <table class="layui-table" lay-skin="nob">
                            <colgroup>
                                <col width="100">
                                <col>
                            </colgroup>
                            <tbody>
                                <tr>
                                    <td>会员卡号：</td>
                                    <td id="card_no"></td>
                                </tr>
                                <tr>
                                    <td>姓名：</td>
                                    <td id="name"></td>
                                </tr>
                                <tr>
                                    <td>手机号：</td>
                                    <td id="phone"></td>
                                </tr>
                                <tr>
                                    <td>会员等级：</td>
                                    <td id="level_name"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="layui-col-md6">
                        <table class="layui-table" lay-skin="nob">
                            <colgroup>
                                <col width="100">
                                <col>
                            </colgroup>
                            <tbody>
                                <tr>
                                    <td>账户余额：</td>
                                    <td id="balance"></td>
                                </tr>
                                <tr>
                                    <td>当前积分：</td>
                                    <td id="points"></td>
                                </tr>
                                <tr>
                                    <td>所属门店：</td>
                                    <td id="store_name"></td>
                                </tr>
                                <tr>
                                    <td>注册时间：</td>
                                    <td id="created_at"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 统计数据 -->
        <div class="layui-card">
            <div class="layui-card-header">
                统计数据
                <div class="layui-inline" style="float: right;">
                    <input type="text" class="layui-input" id="date_range" placeholder="请选择日期范围">
                </div>
            </div>
            <div class="layui-card-body">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-header">消费次数</div>
                            <div class="layui-card-body" id="order_count">0</div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-header">消费金额</div>
                            <div class="layui-card-body" id="total_amount">0.00</div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-header">充值次数</div>
                            <div class="layui-card-body" id="recharge_count">0</div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-header">充值金额</div>
                            <div class="layui-card-body" id="recharge_amount">0.00</div>
                        </div>
                    </div>
                </div>

                <!-- 消费趋势图 -->
                <div class="layui-card">
                    <div class="layui-card-header">消费趋势</div>
                    <div class="layui-card-body">
                        <div id="consumption-trend" style="height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 最近消费记录 -->
        <div class="layui-card">
            <div class="layui-card-header">最近消费记录</div>
            <div class="layui-card-body">
                <table id="LAY-consumption-list" lay-filter="LAY-consumption-list"></table>
            </div>
        </div>
    </div>

    <script src="/app/admin/component/layui/layui.js"></script>
    <script src="/app/admin/component/pear/pear.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script>
    layui.use(['table', 'form', 'laydate'], function(){
        var $ = layui.$
        ,table = layui.table
        ,form = layui.form
        ,laydate = layui.laydate;
        
        // 获取会员ID
        var memberId = getQueryString('id');
        if (!memberId) {
            layer.msg('参数错误', {icon: 2});
            return;
        }
        
        // 初始化图表
        var consumptionTrend = echarts.init(document.getElementById('consumption-trend'));
        
        // 日期范围
        laydate.render({
            elem: '#date_range'
            ,range: true
            ,value: getDefaultDateRange()
            ,done: function(value){
                loadStatistics(value);
            }
        });
        
        // 加载会员信息
        $.get('/app/ky_shouyin/member/detail?id=' + memberId, function(res){
            if(res.code === 0){
                var member = res.data;
                $('#card_no').text(member.card_no);
                $('#name').text(member.name);
                $('#phone').text(member.phone);
                $('#level_name').text(member.level_name);
                $('#balance').text(member.balance + ' 元');
                $('#points').text(member.points);
                $('#store_name').text(member.store_name);
                $('#created_at').text(member.created_at);
            } else {
                layer.msg(res.msg || '获取会员信息失败', {icon: 2});
            }
        }).fail(function() {
            layer.msg('服务器错误，请稍后重试', {icon: 2});
        });
        
        // 加载统计数据
        loadStatistics(getDefaultDateRange());
        
        // 消费记录列表
        table.render({
            elem: '#LAY-consumption-list'
            ,url: '/app/ky_shouyin/member/consumptionList'
            ,where: {member_id: memberId}
            ,cols: [[
                {field: 'id', title: 'ID', width: 80, sort: true}
                ,{field: 'order_no', title: '订单号', width: 160}
                ,{field: 'amount', title: '消费金额', width: 100}
                ,{field: 'points_used', title: '使用积分', width: 100}
                ,{field: 'points_earned', title: '获得积分', width: 100}
                ,{field: 'store_name', title: '门店', width: 120}
                ,{field: 'staff_name', title: '操作员', width: 100}
                ,{field: 'created_at', title: '消费时间', width: 160}
            ]]
            ,page: true
            ,limit: 10
            ,text: {
                none: '暂无数据'
            }
        });
        
        // 加载统计数据
        function loadStatistics(dateRange){
            if (!dateRange) return;
            var dates = dateRange.split(' - ');
            if (dates.length !== 2) return;
            
            $.get('/app/ky_shouyin/member/statistics', {
                member_id: memberId,
                start_date: dates[0],
                end_date: dates[1]
            }, function(res){
                if(res.code === 0){
                    var data = res.data;
                    
                    // 更新统计数字
                    $('#order_count').text(data.order_stats.order_count || 0);
                    $('#total_amount').text((data.order_stats.total_amount || 0) + ' 元');
                    $('#recharge_count').text(data.recharge_stats.recharge_count || 0);
                    $('#recharge_amount').text((data.recharge_stats.total_amount || 0) + ' 元');
                    
                    // 渲染消费趋势图
                    renderConsumptionTrend(data.daily_consumption);
                } else {
                    layer.msg(res.msg || '获取统计数据失败', {icon: 2});
                }
            }).fail(function() {
                layer.msg('服务器错误，请稍后重试', {icon: 2});
            });
        }
        
        // 渲染消费趋势图
        function renderConsumptionTrend(data){
            var dates = [], amounts = [], counts = [];
            layui.each(data, function(index, item){
                dates.push(item.date);
                amounts.push(item.total_amount);
                counts.push(item.order_count);
            });
            
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['消费金额', '消费次数']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: dates
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '金额',
                        axisLabel: {
                            formatter: '{value} 元'
                        }
                    },
                    {
                        type: 'value',
                        name: '次数',
                        axisLabel: {
                            formatter: '{value} 次'
                        }
                    }
                ],
                series: [
                    {
                        name: '消费金额',
                        type: 'line',
                        data: amounts
                    },
                    {
                        name: '消费次数',
                        type: 'bar',
                        yAxisIndex: 1,
                        data: counts
                    }
                ]
            };
            
            consumptionTrend.setOption(option);
        }
        
        // 获取URL参数
        function getQueryString(name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return decodeURIComponent(r[2]);
            }
            return null;
        }
        
        // 获取默认日期范围（最近30天）
        function getDefaultDateRange(){
            var end = new Date();
            var start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 29);
            return formatDate(start) + ' - ' + formatDate(end);
        }
        
        // 格式化日期
        function formatDate(date){
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;
            return year + '-' + month + '-' + day;
        }
        
        // 窗口大小改变时重绘图表
        window.onresize = function(){
            consumptionTrend.resize();
        };
    });
    </script>
</body>
</html> 